<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{$product.pName} - 商品详情</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa; /* 浅灰色背景 */
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        }
        .navbar {
            margin-bottom: 20px;
        }
        .product-detail-card {
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            border: none;
            padding: 30px;
        }
        .product-detail-img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .price {
            font-size: 2.2em;
            color: #e44d26;
            font-weight: bold;
            margin-bottom: 15px;
        }
        .stock {
            color: #6c757d;
            font-size: 0.95em;
            margin-bottom: 20px;
        }
        .quantity-input {
            width: 100px;
            margin-right: 10px;
        }
        .footer {
            background-color: #343a40;
            color: white;
            padding: 20px 0;
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="{:Url('index/index/index')}">网上商城</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    {if condition="$Request.session.user_id"}
                        <li class="nav-item">
                            <a class="nav-link" href="#">欢迎, {$Request.session.username}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{:Url('index/index/cart')}">购物车</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{:Url('index/index/myOrders')}">我的订单</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{:Url('index/index/logout')}">退出登录</a>
                        </li>
                    {else /}
                        <li class="nav-item">
                            <a class="nav-link" href="{:Url('index/index/login')}">登录</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{:Url('index/index/register')}">注册</a>
                        </li>
                    {/if}
                    <li class="nav-item">
                        <a class="nav-link" href="{:Url('admin/index/adminLogin')}">后台管理</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="card product-detail-card">
            <div class="row g-0">
                <div class="col-md-5">
                    <img src="/tp/public/static/upload/{$product.pImg}" class="img-fluid product-detail-img" alt="{$product.pName}">
                </div>
                <div class="col-md-7">
                    <div class="card-body">
                        <h1 class="card-title mb-3">{$product.pName}</h1>
                        <p class="price">¥ {$product.pPrice}</p>
                        <p class="stock">库存: {$product.stock}</p>
                        <p class="card-text description">{$product.pDescr}</p>

                        <form action="{:Url('index/index/addToCart')}" method="post" class="mt-4">
                            <input type="hidden" name="product_id" value="{$product.pId}">
                            <div class="d-flex align-items-center mb-3">
                                <label for="quantity" class="form-label me-2">购买数量:</label>
                                <input type="number" id="quantity" name="quantity" value="1" min="1" max="{$product.stock}" class="form-control quantity-input">
                            </div>
                            <button type="submit" class="btn btn-primary btn-lg">加入购物车</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <p class="text-center mt-4"><a href="{:Url('index/index/index')}" class="btn btn-secondary">返回商品列表</a></p>
    </div>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 网上商城. 保留所有权利。</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>